<template>
	<view> <!--商品排列模板 一个大框为一行 -->
		<view class="module_bgContent">
			<view class="shorter productItem" v-for="(item,index) in product" :key="index">
				<image class="prod-image" src="" mode=""></image>
				<view class="productProp">
					<text class="prop1">{{item.name}}智能机器人250智能机器人250智能机器人250智能机器人250智能机器人250智能机器人250</text>
					<view v-if="bool==true" class="prop2">
						<text class="price">￥{{item.price}}</text>
					</view>
					<view v-else class="prop2">
						<text class="integral">积分:150</text>
						<text class="price2">￥{{item.price}}</text>
					</view>
				</view>
				<!-- 积分兑换 -->
				<shopping-cart v-if="cartId!=4" class="shoppingCart cart-btn"  
				:Item="item" 
				:cartId="cartId" 
				color="#e15852"
				></shopping-cart>
				<!-- 商品购买 -->
				<shopping-cart v-else class="shoppingCart cart-btn2"  
				:Item="item" 
				:cartId="cartId" 
				color="#e15852" 
				:cartBool="true"
				></shopping-cart>
				<!-- v-bind="$attrs" v-on="$listeners" 暂不支持 -->
			</view>
		</view>
	</view>
</template>

<script>
	import shoppingCart from '@/components/shoppingCart-Button.vue'; 
	export default {
		components:{
			shoppingCart,
		},
		name:'product3',
		props:{//把该组件需要用到的参数抛出去，让其他组件或文件来改变(组件间的通信)
			//商品列表
			product: {
				type: Array,
				default: ()=>[]
			},
			//调用按钮模板id
			cartId: {
				type: Number,
				default: 1,
			},
			//显示购物按钮还是兑换按钮
			bool: {
				type: Boolean,
				default: true,
			}
		},
		data() {
			return {
				
			};
		},
		watch:{//用来监听data中的某个值是否有变化
			
		},
		computed:{
			height(){
				this.$util.swiperHenght('.productItem',this.product).then(res=>{
					console.log(res);
					uni.$emit('Height',res)
				}).catch(error=>console.log(error));
			},
		},
		methods:{
			// shoppingCart(){
			// 	this.$refs.shoppingCart.onChange();
			// }
			
		}
	}
</script>

<style lang="scss">
	.shoppingCart{
		width: auto;
		height: auto;
		position: absolute;
		bottom: 20upx;
		right: 60upx;
	}
	.cart-btn{
		bottom: 35upx;
	}
	.cart-btn2{
		bottom: 30upx;
	}
	.module_bgContent{
		width: 100%;
		position: relative;
	}
	.productItem {
		overflow: hidden;
		position: relative;
		z-index: 1;
		margin: 20upx;
		padding: 10upx;
	    background: #fff;
	    border-radius: 10upx;
	    display: flex;
	    align-items: center;
		box-shadow: 0 0 28upx 0 rgba(0,0,0,.08);
		border: 2upx solid #eee;
		border-radius: 12upx;
		background: #fff;
		margin-bottom: 20upx;
		.prod-image{
			width: 232upx;
			height: 232upx;
			display: inline-block;
			line-height: 232upx;
			text-align: center;
			border-radius: 10upx;
			border: 2upx solid #000;
		}
		.productProp {
		    width: 400upx;
		    margin-left: 20upx;
		    display: inline-block;
		    padding: 24upx 30upx 20upx 0;
		    vertical-align: top;
		    position: relative;
		}
		.prop1 {
		    color: #353535;
		    word-break: break-all;
		    text-overflow: ellipsis;
		    overflow: hidden;
		    display: -webkit-box;
		    -webkit-line-clamp: 2;
		    -webkit-box-orient: vertical;
		    -webkit-box-sizing: content-box;
		    box-sizing: content-box;
			font-size: 15px;
			height: 86upx;
			margin-bottom: 60upx;
		}
		.prop2 {
		    width: 100%;
		    overflow: hidden;
		    font-size: 14px;
		    display: flex;
			flex-wrap: wrap;
		    align-items: flex-end;
			.price2{
				color: #999;
				text-decoration: line-through;
				font-size: 12px;
				line-height: 30upx;
			}
			.integral{
				margin-right: 20upx;
			}
		}
	}
	.productItem:last-child {
	    margin-bottom: 0!important;
	}
</style>
